<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
import { usePaymentStore } from '@/stores/payment';
import { computed, onMounted } from 'vue';

const router = useRouter();
const route = useRoute();

// 获取 paymentId，优先从路由参数获取
const paymentStore = usePaymentStore();
const paymentId = computed(() => paymentStore.paymentId);

// 查看缴费详情
const viewPaymentDetails = () => {
  // 这里可以根据需要传递参数或跳转到指定详情页
  router.push({ path: '/payment-success-detail', query: { paymentId: paymentId.value } });
};

// 返回首页
const backToHome = () => {
  router.push('/home');
};

onMounted(() => {
  const paymentIdFromQuery = route.query.paymentId;
  if (typeof paymentIdFromQuery === 'string' && paymentIdFromQuery) {
    paymentStore.setPaymentId(paymentIdFromQuery);
  } else if (Array.isArray(paymentIdFromQuery) && paymentIdFromQuery.length > 0 && paymentIdFromQuery[0]) {
    paymentStore.setPaymentId(paymentIdFromQuery[0]);
  }
});

</script>

<template>
  <div class="payment-success-page">
    <div class="header">
      <van-nav-bar
        title="缴费信息"
        left-arrow
        @click-left="router.back()"
      >
        <template #right>
          <van-icon name="ellipsis" size="20" />
          <van-icon name="circle" size="20" class="ml-2" />
        </template>
      </van-nav-bar>
    </div>

    <div class="content">
      <div class="success-icon">
        <van-icon name="checked" size="60" color="#1989fa" />
      </div>
      
      <div class="success-title">缴费成功</div>
      <div class="success-desc">您已成功缴费，可在个人中心中查看缴费记录</div>
      
      <div class="action-buttons">
        <van-button 
          type="primary" 
          block 
          class="view-details-btn"
          @click="viewPaymentDetails"
        >
          查看缴费详情
        </van-button>
        
        <van-button 
          plain 
          block 
          class="back-home-btn"
          @click="backToHome"
        >
          返回首页
        </van-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.payment-success-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
}

.success-icon {
  margin-bottom: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(25, 137, 250, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.success-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
}

.success-desc {
  font-size: 14px;
  color: #999;
  text-align: center;
  margin-bottom: 40px;
}

.action-buttons {
  width: 100%;
  max-width: 320px;
}

.view-details-btn {
  margin-bottom: 12px;
  height: 44px;
  background-color: #1989fa;
  border: none;
  border-radius: 22px;
}

.back-home-btn {
  height: 44px;
  border-radius: 22px;
  border-color: #1989fa;
  color: #1989fa;
}

.ml-2 {
  margin-left: 8px;
}
</style> 